<template>
  <div>
    <!-- <el-card class="box-card">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" @click="getPlaceList">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card> -->

    <el-card class="box-card">
      <el-table :data="tableData" style="width: 100%" max-height='720'>
        <el-table-column prop="placeId" label="场地id">
        </el-table-column>
        <el-table-column prop="placeName" label="场地名称" width="180">
        </el-table-column>
        <el-table-column prop="placeType" label="场地类型" >
          <template slot-scope="scope">
            <div>{{ placeTypeArr[scope.row.placeType] }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="placeType" label="场地状态">
          <template slot-scope="scope">
            <div>{{ placeStatusArr[scope.row.placeStatus] }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="placeType" label="图片" width="180">
          <template slot-scope="scope">
            <img  style="width: 120px; height: 100px; object-fit: cover" :src="IMGPATH + scope.row.imgPath" alt="">
          </template>
        </el-table-column> -->
        <el-table-column prop="introduce" label="介绍" width="180">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              :content="scope.row.introduce">
              <div slot="reference" class="lineOne">{{ scope.row.introduce }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="nextTime" label="下次使用时间" width="180">
        </el-table-column>
        <el-table-column prop="recFlag" label="操作" width="280">
          <template slot-scope="scope">
            <el-button type="primary" @click="goToDetail(scope.row.placeId)">详情</el-button>
            <el-button type="primary" @click="editCommodity(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <el-dialog title="编辑场地" :visible.sync="editView">
      <el-form ref="form" class="newForm" :model="placeForm" label-width="130px">
        <el-form-item label="场地名称">
          <el-input v-model="placeForm.placeName"></el-input>
        </el-form-item>
        <el-form-item label="场地类型">
          <el-select v-model="placeForm.placeType" placeholder="场地类型">
            <el-option label="空地" value=0></el-option>
            <el-option label="篮球场" value=1></el-option>
            <el-option label="羽毛球场" value=2></el-option>
            <el-option label="乒乓球场" value=3></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="场地介绍">
          <el-input v-model="placeForm.introduce"></el-input>
        </el-form-item>
        <el-form-item label="场地图片">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :action="BASEURL + '/place/uploadPic'"
            :data="{'placeId': placeForm.placeId}"
            :on-success="handleSu"
          >
            <img id="userimg" :src="IMGPATH + placeForm.imgPath" class="avatar" />
            <i v-if="!imageUrl" class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="onSubmit">修改</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="场地详情" :visible.sync="showPlaceDetail">
      <div class="cDetail">场地id: {{ placeDetail.placeId }}</div>
      <div class="cDetail">场地名称: {{ placeDetail.placeName }}</div>
      <div><img class="itemImg" :src="IMGPATH + placeDetail.imgPath" alt="" /></div> 
      <div class="cDetail">场地类型: {{ placeTypeArr[placeDetail.placeType] }}</div>
      <div class="cDetail2">介绍: {{ placeDetail.introduce }}</div>
      <div class="cDetail">场地状态: {{ placeStatusArr[placeDetail.placeStatus] }}</div> 
      <div class="cDetail2">今日使用情况：</div>

      <!-- <div class="itemDetail" v-for="(item, index) in placeDetail.relateActivity" :key="index">  
        <div>活动id: {{item.id}}</div>
        <div>类型: {{item.type}}</div>
        <div>活动名称: {{item.name}}</div>
        <div>开始时间: {{item.startTime}}</div>
        <div>结束时间: {{item.endTime}}</div>
      </div> -->
      <el-table :data="placeDetail.relateActivity" style="width: 100%" max-height='720'>
        <el-table-column prop="id" label="场地id">
        </el-table-column>
        <el-table-column prop="type" label="使用类型" >
          <template slot-scope="scope">
            <div>{{ placeTypeObj[scope.row.type] }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="活动名称" width="180">
          <template slot-scope="scope">
            <div>{{ scope.row.activityName || scope.row.courseName || scope.row.userName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间">
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间">
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import api from "../network/home";
// import { BASEURL } from "../network/config"
export default {
  data() {
    return {
      searchForm: {},
      tableData: [],
      editView:false,
      placeForm:{},
      placeDetail: {},
      showPlaceDetail: false,
      placeTypeArr: ['空地', '篮球场', '羽毛球场', '乒乓球场'],
      placeStatusArr: ['空闲', '占用中'],
      imageUrl:"",
      placeTypeObj:{
        "1": '用户预定',
        "2": '课程',
        "3": '演出',
      }
    };
  },
  computed: {
  },
  methods: {
    getPlaceList(){
      api.getPlaceList().then((res) => {
        this.tableData = res.data.data;
      });
    },
    getPlaceListNew(){
      api.getPlaceList().then((res) => {
        this.tableData = res.data.data.map(item=>{
          return {
            ...item,
            imgPath: item.imgPath + '?' +new Date().getTime()
          }
        })
      });
    },
    resetForm(){
      this.searchForm = {}
    },
    handleSu(){
      this.$message.success('上传成功')
      this.showPlaceDetail = false
      this.editView = false
      this.getPlaceListNew()
    },
    // handleFileUpload(file){
    //   console.log(file);
    //   console.log(this.placeDetail );

      
    //   api.uploadPic({
    //     file: file.file,
    //     placeId: this.placeForm.placeId
    //   }).then(res=>{
    //     console.log(res);
    //   })
    // },
    addCommodity(){
      this.editView = true
      // api.addCommodity()
    },
    editCommodity(row){
      this.editView = true
      this.placeForm = row
      this.placeForm.placeType = this.placeForm.placeType + ''
    },
    
    onSubmit(){
      const { placeName, introduce, placeType, placeId } = this.placeForm;
      const params = {
        placeName, introduce, placeType, placeId
      };
      if (placeId){
        api.updatePlace(params).then(() => {
          this.editView = false
          this.getPlaceList()
        });
      }
      
    },
    cancel(){
      this.editView = false
    },
    goToDetail(id){
      console.log(id);
      api.placeDetail(id).then((res) => {
        this.showPlaceDetail = true
        this.placeDetail = res.data.data || {
        }
      });
    },
  },
  mounted(){
    this.getPlaceList()
  }
};
</script>

<style lang="scss" scoped>
.itemImg{
  margin-left: 50px;
  width: 200px;
  object-fit: cover;
  height: 200px;
}
.box-card{
  margin: 20px;
}
.cDetail{
  height: 50px;
  font-size: 20px;
  margin-left: 50px;
}
.cDetail2{
  // height: 50px;
  font-size: 20px;
  margin-left: 50px;
  margin-bottom: 20px;
}
.itemDetail{
  margin-left: 50px;
  font-size: 18px;
  border: 1px solid ;
  width: 33%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #a70303;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.lineOne{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space:nowrap;
}
</style>